<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账号注册</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        font-size: 10px;
        font-family: "宋体";
    }
    a{
        text-decoration: none;
        color: deepskyblue;
    }
    html,body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #reg{
        width: 50%;
        height: 60%;
        box-shadow: 0 0 3px grey;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #title{
        display: flex;
        flex: 2;
        justify-items: left;
        text-align: center;
        line-height: 40px;
        padding-left: 30px;
    }
    #title #lian{
        font-size: 20px;
        color: black;
    }
    #title #lian:hover{
        font-weight: bolder;
    }
    #contant{
        flex: 6;
        display: flex;
        align-items: start;
        padding-top: 20px;
    }
    #contant ul{
        width: 100%;
    }
    #contant li{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 13px;
    }
    #contant .tag{
        width: 18%;
        font-size: 10px;
        text-align: right;
        color: gray;
    }
    #contant .tip{
        width: 46%;
        font-size: 8px;
        margin-left: 3%;
        color: gray;
    }
    #contant input{
        height: 25px;
        width: 30%;
        margin-left: 3%;
        border: 1px solid;
        border-radius: 3px;
        padding-left: 5px;
    }
    #getCdk{
        background-color: blue;
        color: white;
        border: 1px solid;
        width: 14%;
        height: 20px;
        margin-left: 1%;
        border-radius: 3px;
    }
    #other{
        width: 70%;
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }
    #other #li2{
        margin-top: 10px;
    }
    #other #sub{
        width: 50%;
        height: 25px;
        height: 25px;
        background-color: #FF4500;
        color: #FFFFFF;
        border: 1px solid;
        border-radius: 3px;
    }
    #other .tag{
        width: 10%;
        color: gray;
    }
    #other #ab{
        height: 15px;
        width: 15px;
        color: gray;
    }
    #other .tet{
        vertical-align: middle;
    }
    #other #tet,#use{
        color: gray;
    }
    #foot{
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
    }
    #foot div{
        margin-top: 10px;
    }
    #foot #foot_contant{
        color: gray;
    }
    .friend_a:hover{
        color: red;
    }
</style>
<body>
        <div id="reg">
            <div id="title">
                <a id="lian" href="">账号注册</a>
            </div><hr>
            <div id="contant">
                <ul style="list-style: none">
                    <li id="l1">
                        <span class="tag">手机号码</span>
                        <input type="text" id="mbn" name="mbn" required placeholder="请输入手机号码" onfocus="select(1)" onblur="check(1)">
                        <span class="tip" id="mbn_tip">可用于激活码获取，密码找回，订单查询等</span>
                    </li>
                    <li id="l2">
                        <span class="tag">登录密码</span>
                        <input type="password" name="pwd" id="pwd" required placeholder="请输入登录密码"onfocus="select(2)" onblur="check(2)">
                        <span class="tip" id="pwd_tip"> </span>
                    </li>
                    <li id="l3">
                        <span class="tag">激活码</span>
                        <input type="text" name="cdk" id="cdk" style="width: 15%" required
                               placeholder="请输入激活码" onblur="check(3)" onfocus="select(3)">
                        <button id="getCdk" onclick="findCDK()">获取激活码</button>
                        <span class="tip" id="cdk_tip"> </span>
                    </li>
                </ul>
            </div>
            <div id="other">
                <ul style="list-style: none">
                    <li id="li1">
                        <span class="tag"></span>
                        <input type="checkbox" id="ab" name="ab" class="tet" value="1">
                        <span class="tet" id="tet">我已阅读并同意</span><a href="" class="friend_a">《用户服务协议》</a>
                    </li>
                    <li id="li2">
                        <span class="tag"></span>
                        <button id="sub" onclick="check_user()">同意协议并提交</button>
                        <span id="use" >使用</span>
                        <a href="" class="friend_a">邮箱注册</a>
                    </li>
                </ul>
            </div>
            <hr width="80%" style="margin: auto">
            <div id="foot">

                <div id="foot_top">
                    <a class="friend_a" href="">投资者关系</a> |
                    <a class="friend_a" href="">酒店加盟</a> |
                    <a class="friend_a" href="">业务合作</a> |
                    <a class="friend_a" href="">加入我们</a> |
                    <a class="friend_a" href="">我要投诉</a> |
                    <a class="friend_a" href="">安全中心</a> |
                    <a class="friend_a" href="">About Us</a>
                </div>
                <div id="foot_contant">
                    Copyright ©2016 京ICP备0502 1530号 营业执照信息 保险经纪资质 客服电话10101216
                </div>
            </div>
        </div>
</body>
<script>
    var mbn = document.getElementById("mbn");
    var mbn_tip = document.getElementById("mbn_tip");
    var pwd = document.getElementById("pwd");
    var pwd_tip = document.getElementById("pwd_tip");
    var cdk = document.getElementById("cdk");
    var cdk_tip = document.getElementById("cdk_tip");
    var ab = document.getElementById("ab");
    function check(n) {
        var str;
        switch (n) {
            case 1:
                str = /^1\d{10}$/;
                if(!str.test(mbn.value)){
                    mbn_tip.innerHTML = "请输入正确的手机号";
                }else{
                    mbn_tip.innerHTML = " ";
                }
                break;
            case 2:
                str = /^[a-zA-Z]{1}[a-zA-Z0-9]{5,15}$/;
                if(!str.test(pwd.value)){
                    pwd_tip.innerHTML = "请输入正确的密码";
                }else{
                    pwd_tip.innerHTML = " ";
                }
                break;
            case 3:
                str = /^1111$/;
                if(!str.test(pwd.value)){
                    cdk_tip.innerHTML = "验证码错误请稍后再试";
                }else{
                    cdk_tip.innerHTML = " ";
                }
                break;
            default:
                break;
        }
    }
    function select(n) {
        switch (n) {
            case 1:
                mbn_tip.innerHTML = "可用于激活码获取，密码找回，订单查询等";
                break;
            case 2:
                pwd.innerHTML = "登录密码";
                break;
            case 3:
                cdk_tip.innerHTML = "请获取验证码";
                break;
            default:
                break;
        }
    }
    function findCDK() {
        cdk_tip.innerHTML = "验证码以发送到您的手机";
    }
    function check_user() {
        if(!ab.checked){
            cdk_tip.innerHTML = "请先阅读并同意《用户服务协议》";
        }else{
            cdk_tip.innerHTML = " ";
        }
    }
</script>
</html>